<template>
  <div class="" style="width: 100%; height: 100%">
    <el-popover
      placement="top-start"
      :width="getscalepxcnum(440)"
      trigger="click"
    >
      <div
        :style="{
          textAlign: 'left',
          '--px40': getscalepxc(25),
          '--px30': getscalepxc(30),
          '--px21': getscalepxc(21),
          '--px12': getscalepxc(12),
          '--px15': getscalepxc(15),
        }"
        class="settingpopdiv"
      >
        <!-- <el-divider>时间范围</el-divider> -->

        <!-- <timepick>
          <el-button type="primary" @click="1">时间选择</el-button>
        </timepick> -->

        <el-divider>面板选择</el-divider>

        <el-checkbox-group v-model="pannelarr" @change="1">
          <el-checkbox
            v-for="item in panneloptions"
            :label="item.value"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>

        <!-- <el-divider>地图类型</el-divider> -->
        <!-- <el-radio-group v-model="scencetype">
          <el-radio :label="item.value" v-for="item in scencetypeoptions">{{
            item.name
          }}</el-radio>
        </el-radio-group> -->

        <el-divider>绕点旋转</el-divider>
        俯仰角：<br />
        <el-slider
          v-model="pitch"
          :max="0"
          :min="-90"
          :show-tooltip="false"
        ></el-slider>
        距离：<br />
        <el-slider
          v-model="range"
          :max="100000"
          :min="1000"
          :show-tooltip="false"
        ></el-slider>
        环绕周期：<br />
        <el-slider
          v-model="cycle"
          :max="300"
          :min="3"
          :show-tooltip="false"
        ></el-slider>
        <div style="width: 100%; text-align: center">
          <el-button
            type="primary"
            size="mini"
            @click="startfly('rotateCenter')"
            >绕点旋转</el-button
          >
        </div>

        <el-divider>GIS图元素</el-divider>
        管&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;径：
        <el-switch
          v-model="switchguanjing"
          active-color="#13ce66"
          @change="switchguanjing1()"
          inactive-color="#ff4949"
        >
        </el-switch>
        <el-select
          v-model="dnval"
          value-key=""
          placeholder=""
          clearable
          multiple
          filterable
          collapse-tags
          @change="dntypechange()"
        >
          <el-option
            v-for="item in dnoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <br />
        <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
        热力站名称：
        <el-switch
          v-model="switchrelizhan"
          active-color="#13ce66"
          @change="switchrelizhan1()"
          inactive-color="#ff4949"
        >
        </el-switch>

        <el-divider>其他</el-divider>

        <!-- <efficiency /> -->
      </div>

      <div slot="reference">
        <div
          :class="{}"
          :style="{
            width: this.getscalepxc(50),
            height: this.getscalepxc(50),
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            backgroundImage: `url(/configuration/2d/shezhi.png)`,
          }"
          @click="1"
        ></div>
      </div>
    </el-popover>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

import xuanzhuanmixin from "./xuanzhuanmixin";
import gismixin from "./gismixin";

export default {
  name: "commonsettingbtn",
  mixins: [commonmixins, xuanzhuanmixin, gismixin],
  components: {},
  data() {
    return {
      switchguanjing: false,
      switchrelizhan: false,
      pannelarr: [],
      panneloptions: [
        {
          value: "leftpannel",
          label: "左侧面板",
        },
        {
          value: "rightpannel",
          label: "右侧面板",
        },
        {
          value: "warnpannel",
          label: "告警信息",
        },
        {
          value: "zhuyipannel",
          label: "注意事项",
        },
        {
          value: "jindutiaopannel",
          label: "进度条",
        },
      ],
      scencetypeoptions: [
        { name: "能效", value: "nengxiao" },
        { name: "gis地图", value: "gongre" },
      ],
      scencetype: "gongre",
    };
  },
  computed: {},
  watch: {
    pannelarr: {
      handler: function (n, o) {
        this.switchpannel(n);
      },
      // immediate: true,
    },
    scencetype: {
      handler: function (n, o) {
        this.switchbtn(n);
      },
    },
  },
  created() {},
  mounted() {
    //面板显示隐藏
    let type = localStorage.getItem("showpannel");
    if (!type) {
      // this.erchecked = true;
      this.pannelarr = [
        "leftpannel",
        "rightpannel",
        "warnpannel",
        "zhuyipannel",
        "jindutiaopannel",
      ];
    } else {
      this.pannelarr = JSON.parse(type);
    }

    this.$root.commonbtn = this;
  },
  methods: {
    initlocal(name, isjson = false) {
      let type = localStorage.getItem(name);
      if (!type) {
        return false;
      } else {
        if (isjson) {
          return JSON.parse(type);
        } else {
          return type;
        }
      }
    },
    setlocal(name, type, isjson = false) {
      if (isjson) {
        localStorage.setItem(name, JSON.stringify(type));
      } else {
        localStorage.setItem(name, type);
      }
    },
    switchpannel(type) {
      this.$store.state.daping.hidepannel = [];
      this.panneloptions.map((item) => {
        if (type.indexOf(item.value) == -1) {
          this.$store.state.daping.hidepannel.push(item.value);
        }
      });
      this.$store.state.daping.showhidearr = type;
      this.$notify.info({
        message: "切换面板成功",
      });
      localStorage.setItem("showpannel", JSON.stringify(type));
    },
    switchbtn(type) {
      this.$store.state.daping.scencetype = type;
      this.$notify.info({
        message: "三维地图场景切换成功",
      });
    },
  },
};
</script>
<style lang='scss'>
//设置按钮跟能效图下拉框的字体都在此设置

.settingpopdiv {
  font-size: var(--px15) !important;

  .el-divider__text,
  .el-link {
    font-size: var(--px15) !important;
  }

  .el-button--mini,
  .el-button--small {
    font-size: var(--px15) !important;
  }

  .el-checkbox__label {
    // font-size: 50px;
    font-size: var(--px40) !important;
  }
  .el-checkbox {
    // font-size: 50px;
    font-size: var(--px40) !important;
  }
  .el-checkbox-group {
    // font-size: 50px;
    font-size: var(--px40) !important;
  }
  .el-checkbox__inner {
    width: var(--px30);
    height: var(--px30);
    &::after {
      height: var(--px21);
      left: var(--px12);
    }
  }
}
.el-select-dropdown__item {
  font-size: var(--px40) !important;
}
.el-autocomplete-suggestion__list {
  font-size: var(--px30);
}
</style>